<template>
  <span ref="countRef"></span>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, watch } from 'vue';

// 定义 CountUp 实例的类型
interface CountUpInstance {
  error?: any;
  start: () => void;
  update: (newVal: number) => void;
}

export default defineComponent({
  name: 'CountUp',
  // 组件属性定义
  props: {
    // 结束值（必须）
    end: {
      type: Number,
      required: true,
    },
    // 配置选项（可选）
    options: {
      type: Object,
      default: () => ({}),
    },
  },
  // 组合式 API 设置函数
  setup(props) {
    // 获取 DOM 元素引用
    const countRef = ref<HTMLElement | null>(null);
    // CountUp 实例（初始为空）
    let countUp: CountUpInstance | null = null;

    // 组件挂载后执行
    onMounted(async () => {
      try {
        // 动态导入 CountUp 库以避免类型问题
        const CountUpModule = await import('countup');
        const CountUp = CountUpModule.default || CountUpModule;

        // 确保元素引用存在
        if (countRef.value) {
          // 使用完整的参数列表创建 CountUp 实例
          countUp = new (CountUp as any)(
            countRef.value, // 目标元素
            0, // 起始值
            props.end, // 结束值
            0, // 小数位数
            2, // 动画持续时间（秒）
            props.options // 配置选项
          );

          // 检查是否有初始化错误
          if (countUp && countUp.error) {
            console.error(countUp.error);
            return;
          }
          // 启动动画
          if (countUp) {
            countUp.start();
          }
        }
      } catch (error) {
        // 捕获并记录导入或初始化错误
        console.error('Failed to initialize CountUp:', error);
      }
    });

    // 监听 end 属性变化
    watch(
      () => props.end,
      newVal => {
        // 如果 CountUp 实例存在，则更新值
        if (countUp) {
          countUp.update(newVal);
        }
      }
    );

    // 暴露给模板的属性
    return {
      countRef,
    };
  },
});
</script>

<style scoped></style>
